<template>
    <div>
        <div style="margin-bottom: 20px; overflow: hidden;">
            <div style="float: left; ">
                <el-checkbox v-model="checked1" style="vertical-align: sub;">同步编辑</el-checkbox>
            </div>
            <div style="float: right;">
                <el-button @click="handleClick" style="background-color: #000; color: #fff;">使用自动标题</el-button>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="productName" label="引用编号">
            </el-table-column>
            <el-table-column prop="referenceContent" label="参考内容">
            </el-table-column>
            <el-table-column prop="model" label="匹配的型号">
            </el-table-column>
            <el-table-column prop="productTitle" label="商品标题">
                <template v-slot="scope">
                    <el-input v-model="scope.row.brand"  placeholder="" maxlength="60" show-word-limit></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作">
                <!-- <template v-slot="scope">
                    <div>
                    </div>
                </template> -->
            </el-table-column>
        </el-table>


        <el-drawer title="自动标题数据设置" :visible.sync="drawerState" direction="rtl" append-to-body
            :before-close="handleClose" custom-class="drawer_class">
            <div>
                <h5>基本设置</h5>
                <el-form :model="formData" ref="formData" label-width="130px" label-position="left"
                    style="padding: 20px;">
                    <el-form-item label="参数模板">
                        <el-select v-model="templateValue" clearable placeholder="请选择"
                            style="width: 200px; margin-right: 10px;">
                            <el-option v-for="item in templateOptions" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button type="primary" @click="handleUpdate">更新/保存模板</el-button>
                        <el-button type="danger" @click="clickDelete" :disabled="!templateValue">删除该模板</el-button>
                    </el-form-item>
                    <el-form-item label="标题生成方式">
                        <el-radio-group v-model="formData.makeType">
                            <el-radio label="1">标题词优先</el-radio>
                            <el-radio label="2">型号错词优先</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="多型号标题制作">
                        <el-switch v-model="formData.moreModelMake"></el-switch>
                    </el-form-item>

                    <el-form-item label="多型号排序规则">
                        <el-radio-group v-model="formData.morePhoneOrderType">
                            <el-radio label="1">根据产品型号顺序</el-radio>
                            <el-radio label="2">首型号固定,其他型号随机</el-radio>
                            <el-radio label="3">随机排放</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="标题前缀">
                        <el-input v-model="formData.prefix" placeholder="请输入标题前缀(可不填)"></el-input>
                    </el-form-item>
                    <el-form-item label="标题后缀">
                        <el-input v-model="formData.suffix" placeholder="请输入标题后缀(可不填)"></el-input>
                    </el-form-item>
                </el-form>

                <el-form :model="formData" ref="formData" style="padding: 0 20px;" :inline="true">
                    <el-form-item label="品牌名称大写">
                        <el-switch v-model="formData.brandCapital"></el-switch>
                    </el-form-item>
                    <el-form-item label="型号名称全部大写">
                        <el-switch v-model="formData.modelNameAllCapital"></el-switch>
                    </el-form-item>

                    <el-form-item label="品牌型号加入空格">
                        <el-switch v-model="formData.joinChineseBrand"></el-switch>
                    </el-form-item>

                    <el-form-item label="型号格式化">
                        <el-switch v-model="formData.modelFormatting"></el-switch>
                    </el-form-item>
                </el-form>
                <h5>高级设置</h5>
                <el-form :model="formData" ref="formData" label-width="auto" label-position="left"
                    style="padding: 0 20px;">
                    <el-form-item label="加入产品名称">
                        <el-radio-group v-model="formData.addProductNameType">
                            <el-radio label="-1">不加入</el-radio>
                            <el-radio label="1">加入至标题前</el-radio>
                            <el-radio label="2">加入至标题后</el-radio>
                            <el-radio label="3">随机加入</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="首个型号随机规则">
                        <el-radio-group v-model="formData.firstModelShuffleType">
                            <el-radio label="-1">不随机</el-radio>
                            <el-radio label="1">按型号随机</el-radio>
                            <el-radio label="2">按型号+错词随机</el-radio>
                            <el-radio label="3">按我的词库定义的型号随机</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-form :model="formData" ref="formData" style="padding: 0px 20px;" :inline="true">
                    <el-form-item label="免型号匹配">
                        <el-switch v-model="formData.noMatching"></el-switch>
                    </el-form-item>
                    <el-form-item label="标题优先添加入网型号">
                        <el-switch v-model="formData.deviceName"></el-switch>
                    </el-form-item>

                    <el-form-item label="加入父品牌">
                        <el-switch v-model="formData.addParentBrand"></el-switch>
                    </el-form-item>

                    <el-form-item label="去除重复品牌词">
                        <el-switch v-model="formData.wipeRepetitionBrandWord"></el-switch>
                    </el-form-item>

                    <el-form-item label="系统自动补词">
                        <el-switch v-model="formData.autoFillWord"></el-switch>
                    </el-form-item>
                </el-form>

                <el-form :model="formData" ref="formData" style="padding: 0px 20px;" :inline="true">
                    <el-form-item label="型号后缀">
                        <el-input v-model="formData.modelSuffix" placeholder="请输入型号后缀(可不填)"></el-input>
                    </el-form-item>
                    <el-form-item label="多型号分割符">
                        <el-input v-model="formData.morePhoneSplitSymbol" placeholder="若不填写则默认为 / 符号"></el-input>
                    </el-form-item>

                    <el-form-item label="品牌所有型号加'适用':">
                        <el-select v-model="formData.brandPreventIllegal" placeholder="请选择需要在标题中加入适用的型号品牌!"
                            style="width: 320px;">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>


                <el-form :model="formData" ref="formData" style="padding: 0px 20px;" :inline="true">
                    <el-form-item label="型号加入中文品牌">
                        <el-switch v-model="formData.brandCapital"></el-switch>
                    </el-form-item>
                    <el-form-item label="全自动构成标题">
                        <el-switch v-model="formData.autoTitleAnalysis"></el-switch>
                    </el-form-item>
                </el-form>


                <h5>标题词设置(多个词语请以 / 符号分割!)</h5>
                <el-form :model="formData" ref="formData" label-width="auto" label-position="left"
                    style="padding: 20px;">
                    <el-form-item label="自定义词">
                        <el-input v-model="formData.customWords"
                            placeholder="请输入自定义词,多个词语已 / 符号分割!若填写为其他符号,则视为一个词语!(可不填)"></el-input>
                    </el-form-item>
                    <el-form-item label="分隔符">
                        <el-input v-model="formData.customWordsSplitSymbol" placeholder="自定义词分割符"
                            style="width: 370px; margin-right: 10px;"></el-input>
                        <el-checkbox v-model="formData.customWordsRandom">顺序随机</el-checkbox>
                    </el-form-item>
                    <el-form-item label="词语类型">
                        <el-select v-model="formData.titleTypeEnum" placeholder="请选择" style="width: 200px;"
                            @change="changeTypeEnum">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="材质词">
                        <el-checkbox-group v-model="materialWordsValue">
                            <el-checkbox v-for="(item, index) in materialWords" :key="index" :label="item.id"> {{
                                item.wordName
                                }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="风格词">
                        <el-checkbox-group v-model="styleWordsValue">
                            <el-checkbox v-for="(item, index) in styleWords" :key="index" :label="item.id"> {{
                                item.wordName
                                }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="特性词">
                        <el-checkbox-group v-model="featureWordsValue">
                            <el-checkbox v-for="(item, index) in featureWords" :key="index" :label="item.id"> {{
                                item.wordName
                                }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="通用词">
                        <el-checkbox-group v-model="genericWordsValue">
                            <el-checkbox v-for="(item, index) in genericWords" :key="index" :label="item.id"> {{
                                item.wordName
                                }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </div>
            <div style="text-align: right; padding: 0 20px 20px 0;">
                <el-button type="primary" @click="handleSure">确定</el-button>
                <el-button @click="handleClose">关闭</el-button>
            </div>
        </el-drawer>


        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getProductList" />
    </div>
</template>

<script>
import { getDefaultTitle, getTitleTemplates, getGainWord, updateOrAddTitleTemplate, deleteTitleTemplateById } from "@/api/product/productInfo";

export default {
    props: {
        releaseItem: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            options: [
                { label: '手机壳', value: 1 },
                { label: '钢化膜', value: 2 },
                { label: '平板壳', value: 3 },
            ],
            templateOptions: [],
            templateValue: '',
            tableData: [
                {
                    label: '壳喜壳乐数码店',
                    typeOptions: [{
                        value: '0',
                        label: '不分类'
                    }],
                    templateOptions: [{
                        value: '0',
                        label: '平台默认模板'
                    }]
                }
            ],
            drawerState: false,
            checked1: false,
            total: 0,
            formData: {
                titleTypeEnum: 1,
            },
            featureWords: [],
            genericWords: [],
            materialWords: [],
            styleWords: [],
            featureWordsValue: [],
            genericWordsValue: [],
            materialWordsValue: [],
            styleWordsValue: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                productNum: undefined,
                productName: undefined,
                productType: undefined,
                state: undefined,
                tradeFace: undefined
            },
        }
    },
    watch: {
        templateValue(val) {
            if (val) {
                const configInfo = this.templateOptions.filter(item => item.id == val)
                if (configInfo[0]?.configInfo) {
                    this.formData = JSON.parse(configInfo[0]?.configInfo)
                    const wordLibrary = this.formData.wordLibrary

                    this.featureWordsValue = this.optionsName2Object(wordLibrary.featureWords, this.featureWords) || []
                    this.genericWordsValue = this.optionsName2Object(wordLibrary.genericWords, this.genericWords) || []
                    this.materialWordsValue = this.optionsName2Object(wordLibrary.materialWords, this.materialWords) || []
                    this.styleWordsValue = this.optionsName2Object(wordLibrary.styleWords, this.styleWords) || []
                    this.formData.customWords = wordLibrary.customWords?.join('/') || ''

                }
            } else {
                this.formData = {
                    titleTypeEnum: 1
                }
                this.featureWordsValue = []
                this.genericWordsValue = []
                this.materialWordsValue = []
                this.styleWordsValue = []
            }
        },
    },
    mounted() {
        this.getDefaultTitle()
        this.getTitleTemplates()
        this.getGainWord()
    },
    methods: {
        changeTypeEnum(val) {
            const typeName = this.options.filter(item => item.value == val)[0]?.label
            this.getGainWord(typeName)
        },
        getDefaultTitle() {
            getDefaultTitle(this.releaseItem.id).then(res => {
                this.tableData = res.value
            })
        },
        getTitleTemplates() {
            console.log('123', 123);
            getTitleTemplates().then(res => {
                this.templateOptions = res.value
            })
        },
        getGainWord(typeName = '手机壳') {
            getGainWord(typeName).then(res => {
                this.featureWords = res.value.featureWords
                this.genericWords = res.value.genericWords
                this.materialWords = res.value.materialWords
                this.styleWords = res.value.styleWords
                console.log('this.styleWords', this.styleWords);
            })
        },
        handleClick() {
            this.drawerState = true
        },
        handleSure() {
            this.drawerState = false
        },
        handleClose() {
            this.drawerState = false
        },
        handleUpdate() {
            const template = this.templateOptions.filter(item => this.templateValue == item.id)[0]
            const wordLibrary = {
                materialWords: this.getOptionsName(this.materialWordsValue, this.materialWords),
                featureWords: this.getOptionsName(this.featureWordsValue, this.featureWords),
                genericWords: this.getOptionsName(this.genericWordsValue, this.genericWords),
                styleWords: this.getOptionsName(this.styleWordsValue, this.styleWords),
                customWords: this.formData.customWords?.split('/'),
            }
            const configInfo = JSON.parse(JSON.stringify(this.formData))
            configInfo.wordLibrary = wordLibrary
            delete configInfo.customWords

            let params = {}
            if (!this.templateValue) {
                this.$prompt('请输入模板名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(ev => {
                    params = {
                        name: ev.value,
                        configInfo: JSON.stringify(configInfo)
                    }
                    updateOrAddTitleTemplate(params).then(res => {
                        this.$message.success('操作成功')
                        this.getTitleTemplates()
                    })
                })
            } else {
                params = {
                    name: template.name,
                    id: template.id,
                    configInfo: JSON.stringify(configInfo)
                }
                updateOrAddTitleTemplate(params).then(res => {
                    this.$message.success('操作成功')
                    this.getTitleTemplates()
                })
            }
        },
        getOptionsName(data, options) {
            let nameList = []
            data.forEach(item => {
                options.forEach(dom => {
                    if (item == dom.id) {
                        nameList.push(dom.wordName)
                    }
                })
            })
            return nameList
        },
        optionsName2Object(data, options) {
            let arrList = []
            data.forEach(item => {
                options.forEach(dom => {
                    // console.log('dom', dom);
                    if (item == dom.wordName) {
                        arrList.push(dom.id)
                    }
                })
            })
            console.log('arrList', arrList);
            return arrList
        },
        clickDelete() {
            this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteTitleTemplateById(this.templateValue).then(res => {
                    this.templateValue = ''
                    this.$message.success('操作成功')
                    this.getTitleTemplates()
                })
            })

        },
        /** 查询产品列表 */
        getProductList() {

        },
        handleEmitData() {
            this.$emit('send', {
                dataUploadDetailVO: this.tableData.map(item => {
                    return { id: item.id, productTitle: item.productTitle, referenceContent: item.referenceContent, model: item.model, }
                })
            });
            return true
        },
    }
}
</script>

<style lang="scss" scope>
.drawer_class {
    width: 40% !important;
    height: 100%;
    overflow-y: auto;

    h5 {
        margin-left: 20px;
        padding: 0 10px;
        font-size: 20px;
        color: darkred;
        font-weight: bold;
    }
}
</style>